<template>
    <div class="home-box">
        <div class="home-content">
            <div class="home-left">
                <div class="left-header">
                    <h5>常用工具</h5>
                    <div class="right-utils">
                        <div class="utils-content" v-for="(item, index ) in utilsData" :key="index"
                            @click="toRouterView(item.title)">
                            <img :src="item.img" alt="">
                            <p>{{ item.title }}</p>
                        </div>
                    </div>
                </div>
                <div class="main-operatingQuota">
                    <!-- 总经额度 -->
                    <OperatingQuota />
                </div>
                <div class="main-businessArrears" style="display: flex;">
                    <!-- 业务欠款 -->
                    <BusinessArrears />
                    <!-- 业务类型 -->
                    <BusinessType />
                </div>
                <div class="main-paymentProgress">
                    <!-- 账款进度 -->
                    <paymentProgress />
                </div>
            </div>
            <div class="header-right">
                <div class="schedule">
                    <!-- 我的日程 -->
                    <Schedule />
                </div>
                <div class="companyNotices">
                    <!-- 公司通告 -->
                    <CompanyNotices />
                </div>
                <div class="audit">
                    <!-- 审核 -->
                    <auditView />
                </div>
            </div>
        </div>
        <div class="home-floor" style="display: flex; width: 100%;margin-top: 20px;">
            <div class="main-receivablesCollection">
                <!-- 账款回收 -->
                <receivablesCollection />
            </div>
            <div class="main-OperationalData">
                <!-- 经营数据统计 -->
                <OperationalData />
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// 经营额度
import OperatingQuota from '@/components/eachers/Line/home/OperatingQuota.vue'
// 业务类型
import BusinessType from '@/components/eachers/bar/home/BusinessType.vue'
// 经营数据统计
import OperationalData from '@/components/eachers/bar/home/OperationalData.vue'
// 业务欠款
import BusinessArrears from '@/components/eachers/chart/home/BusinessArrears.vue'
// 账款进度
import paymentProgress from '@/components/eachers/blister/home/paymentProgress.vue'
// 账款回收
import receivablesCollection from '@/components/eachers/chart/home/receivablesCollection.vue'
// 我的日程
import Schedule from '@/components/home/schedule/index.vue'
// 公司通告
import CompanyNotices from '@/components/home/CompanyNotices/index.vue'
// 审核
import auditView from '@/components/home/auditView/index.vue'

let router = useRouter()
// 常用工具
let utilsData = ref([
    {
        img: new URL('@/assets/images/home/utils5.png', import.meta.url).href,
        title: '待审核'
    },
    {
        img: new URL('@/assets/images/home/utils3.png', import.meta.url).href,
        title: '销货单'
    },
    {
        img: new URL('@/assets/images/home/utils2.png', import.meta.url).href,
        title: '新增订单'
    },
    {
        img: new URL('@/assets/images/home/utils1.png', import.meta.url).href,
        title: '审核通过'
    },
    {
        img: new URL('@/assets/images/home/utils4.png', import.meta.url).href,
        title: '待办理'
    },
    {
        img: new URL('@/assets/images/home/utils6.png', import.meta.url).href,
        title: '日程管理'
    },
])
// 常用工具跳转
const toRouterView = (txt) => {
    switch (txt) {
        case '待审核':
            router.push({path:'/tickets/details',query:{state:'待审核'}})
            break;
        case '销货单':
            router.push('/tickets/audit')
            break;
        case '新增订单':
            router.push('/tickets/newOrders')
            break;
        case '审核通过':
            router.push({path:'/tickets/details',query:{state:'审核通过'}})
            break;
        case '待办理':
            router.push('/tickets/todo')
            break;
        case '日程管理':
            router.push('/')
            break;

        default:
            break;
    }
}
</script>
<style scoped lang='scss'>
.home-box {
    padding: 0 20px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    h5 {
        position: relative;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 20px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-top: 30px;
        margin-bottom: 20px;

        &::after {
            content: '';
            width: 5px;
            height: 20px;
            background-color: #1947FF;
            border-radius: 5px;
            position: absolute;
            left: -9px;
            top: 0px;
        }
    }

    .home-content {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;

        .home-left {
            width: 65%;

            .left-header {
                width: 100%;

                .right-utils {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 100px;
                    .utils-content {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        cursor: pointer;
                        p {
                            font-size: 16px;
                            color: #333333;
                            margin-top: 5px;
                        }
                    }
                }
            }

            .main-operatingQuota,
            .main-businessArrears,
            .main-paymentProgress {
                width: 100%;
            }

            // 总经营额度
            .main-operatingQuota {
                height: 400px;
            }

            // 业务欠款  类型统计  俩个
            .main-businessArrears {
                height: 400px;
            }

            // 账款进度
            .main-paymentProgress {
                height: 500px;
            }

        }

        .header-right {
            width: 30%;

            .schedule,
            .companyNotices,
            .audit {
                width: 100%;
            }
        }
    }

    .home-floor {

        // 账款回收
        .main-receivablesCollection {
            height: 400px;
            width: 40%;
        }

        // 经营数据统计
        .main-OperationalData {
            width: 60%;
            height: 400px;
        }
    }
}
</style>
